<template>
  <a-modal
    :maskClosable="maskClosable"
    title="编辑云平台资源"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 14 }" :form="form">
        <a-form-item label="资源名称">
          <a-input autocomplete="off" v-decorator="['name', decoratorOptions.name]" />
        </a-form-item>
        <a-form-item label="资源类型">
<!--          <a-input v-model="typeName" readOnly/>-->
          <span class="ant-form-text">{{ typeName }}</span>
        </a-form-item>
        <a-form-item label="数据中心">
<!--          <a-input  v-model="datacenterName" readOnly/>-->
          <span class="ant-form-text">{{ datacenterName }}</span>
        </a-form-item>
        <a-form-item label="资源所属服务器">
<!--          <a-input  v-model="nodeName" readOnly/>-->
          <span class="ant-form-text">{{ nodeName }}</span>
        </a-form-item>
        <template v-if="type === 0">
          <a-form-item label="CPU">
            <span class="ant-form-text">{{ cpuCores ? (cpuCores + ' 核') : '' }}</span>
          </a-form-item>
          <a-form-item label="内存">
            <span class="ant-form-text">{{ memory ? (memory + ' GB') : '' }}</span>
          </a-form-item>
        </template>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { gPostAction } from "@/api/manage";
export default {
  name: "EditModal",
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      decoratorOptions: {
        name: {
          rules: [
            { required: true, message: "请输入资源名称" },
            { validator: this.validators.noWhitespace(), },
            { validator: this.validators.noIllegalString() },
            { max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
          ],
        },
      },
      typeName:'',
      datacenterName:'',
      maskClosable: false,
      resId: "",
      nodeName:'',
      cpuCores:'',
      memory:'',
      type: 0,
    };
  },
  methods: {
    edit(record) {
      this.visible = true;
      this.resId = record.id;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          name: record.name,
        });
      });
      const postData={
        id:this.resId,
        title: "精确管控与供电制冷联动-基础资源细粒度感知-资源管理L3层-云平台资源"
      }
      gPostAction("/cloud_resource/detail",postData)
          .then((res)=>{
            if (res.success){
              this.typeName = res.data.typeName;
              this.datacenterName = res.data.datacenterName;
              this.nodeName = res.data.nodeName;
              this.memory = res.data.memory;
              this.cpuCores = res.data.cpuCores;
              this.type = res.data.type;
            }
          })
    },
    handleOk(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;

          const postData = {
            name: values.name,
            id: this.resId,
            title: "精确管控与供电制冷联动-基础资源细粒度感知-资源管理L3层-云平台资源"
          };
          gPostAction("/cloud_resource/update1", postData)
            .then((res) => {
              if (res.success) {
                this.$message.success("操作成功");
                this.$emit("ok");
              }
            })
            .finally(() => {
              this.handleCancel();
            });
        }
      });
    },
    handleCancel() {
      this.visible = false;
      this.confirmLoading = false;
    },
  },
};
</script>
